<template>
    <div class="filter-by custom-scroll">
        <template>
            <!-- <div class="title">按游戏属性筛选</div> -->
            <ul class="cates">
                <li v-for="(cate, idx) in cateObj" :key="idx" v-if="cate.show">
                    <a class="cate-name" :class="{ 'collapse': cate.checked }" @click="handleOpen(cate)">{{ cate.name }}</a>
                    <ul class="sub-cates" v-if="cate.checked" :class="{'single':cate.name=='风格'||cate.name=='平台'||cate.name=='版式'||cate.name=='上线年份'}">
                        <li v-for="(sub, subidx) in cate.items" :class="{ 'active': sub.selected }" @click="handleSelSub(cate,sub)" v-if="sub.title != '全部'&&(subidx<7||cate.showAll)&&sub.show">
                        <a class="text">{{ sub.title }}</a><i class="num">{{sub[viewnumfield]?sub[viewnumfield]:0 }}</i>
                        </li>
                        <li class="view-btn" v-if="cate.items.length>7&&!keyword"><a @click="cate.showAll=!cate.showAll">显示{{cate.showAll?'较少':'更多'}}</a></li>
                    </ul>
                </li>
            </ul>
        </template>
        <!-- <template v-else>
            <div class="sub-title"><a class="sub-go-back" @click="isSubCate = false"></a>{{cateObj[parentIdx].name}}</div>
            <el-scrollbar class="scrollMenuBox">
                <ul class="sub-cates">
                    <li v-for="(sub,subidx) in cateObj[parentIdx].items" :class="{'active':sub.selected}" @click="handleSelSub(cateObj[parentIdx],sub)" v-if="sub.title!='全部'">{{sub.title}}</li>
                </ul>
            </el-scrollbar>
        </template> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            parentIdx: -1,
            isSubCate: false,
            cateObj: []
        }
    },
    props: ['params', 'cates','viewnumfield','keyword'],
    watch: {
        cates: {
            handler(newd, old) {
                if(newd.length>0)
                {
                    newd[0].checked=true;
                }
                newd.map(item=>{
                    item.show=true;
                    item.showbtn=item.items.length;
                    item.items.map(sub=>{
                        sub.show=true;
                    })
                })
                this.cateObj = newd;
            }
        },
        keyword:{
            handler(newd,old){
                if(newd)
                {
                    this.cateObj.map(item=>{
                        let idx=0;
                        item.items.map(sub=>{
                            if(sub.title.indexOf(newd)>-1){
                                idx++;
                                sub.show=true;
                            }else{
                                sub.show=false;
                            }
                        })
                        if(idx>0){
                            item.showAll=true;
                            item.checked=true;
                            item.showbtn=idx;
                            item.show=true;
                        }else{
                            item.checked=false;
                            item.showbtn=0;
                            item.showAll=false;
                            item.show=false
                        }
                    })
                }else{
                    this.cateObj.map(item=>{
                        item.show=true;
                        item.checked=false;
                        item.showbtn=item.items.length;
                        item.showAll=false;
                        item.items.map(sub=>{
                            sub.show=true;
                        })
                    })
                }
                this.$forceUpdate()
            }
        }
    },
    mounted() {
        let cates = this.cates;
        if(cates.length>0){
            cates[0].checked=true;
        }
        cates.map(item=>{
            item.show=true;
            item.showbtn=item.items.length;
            item.items.map(sub=>{
                sub.show=true;
            })
        })
        this.cateObj=cates;
        // let _allCateTypes=JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
        // let _cdatas=[];
        // _cdatas.push({name:'风格',items:_allCateTypes.styles,queryfield:'style'})
        // _cdatas.push({name:'类型',items:_allCateTypes.categorys,queryfield:'categoryIds'})
        // _cdatas.push({name:'主题',items:_allCateTypes.themes,queryfield:'tags'})
        // _cdatas.push({name:'功能',items:_allCateTypes.funs,queryfield:'paramImagesDescFunc'})
        // _cdatas.push({name:'材质图案',items:_allCateTypes.materials,queryfield:'paramImagesDescMaterial'})
        // _cdatas.push({name:'平台',items:_allCateTypes.devices,queryfield:'device'})
        // _cdatas.push({name:'版式',items:_allCateTypes.orientations,queryfield:'orientation'})
        // _cdatas.push({name:'上线年份',items:_allCateTypes.eras,queryfield:'era'})
        // this.cateObj=_cdatas;
    },
    methods: {
        clearAll(){
            this.cateObj.map(item=>{
                item.items.map(sub=>{
                    sub.selected=false;
                })
            })
            this.$forceUpdate();
        },
        handleOpen(cate) {
            // if (this.parentIdx == idx) {
            //     this.parentIdx = -1;
            // } else {
            //     this.parentIdx = idx;
            // }
            if(cate.checked==undefined){
                cate.checked=true;
            }else{
                cate.checked=!cate.checked;
            }
            this.$forceUpdate();
        },
        handleSelSub(_parent,sub) {
            _parent.checked=true;
            let _type = '22';
            // let _parent=this.cateObj[this.parentIdx];
            // let _parent=sub;
            if (_parent.queryfield == 'orientation' || _parent.queryfield == 'era' || _parent.queryfield == 'device' || _parent.queryfield == 'style') {
                if (!sub.selected) {
                    _parent.items.map((item) => {
                        if (item != sub) {
                            item.selected = false;
                        }
                    })
                }
            }
            sub.selected = sub.selected ? !sub.selected : true;
            this.$forceUpdate();

            let params = {}
            this.cateObj.map(item => {
                if (item.queryfield == 'orientation' || item.queryfield == 'era' || item.queryfield == 'device' || item.queryfield == 'style') {
                    params[item.queryfield] = '';
                    item.items.map(sub => {
                        if (sub.selected) {
                            params[item.queryfield] = sub.value;
                        }
                    })
                } else {
                    params[item.queryfield] = [];
                    item.items.map(sub => {
                        if (sub.selected) {
                            params[item.queryfield].push(sub.value);
                        }
                    })
                    params[item.queryfield] = params[item.queryfield].join(',');
                }
            })
            if (_parent.name == '功能' || _parent.name == '材质图案') {
                _type = '10';
            }
            let oldparams = Object.assign({}, this.params);
            let aparams = Object.assign(oldparams, params);
            this.$emit('change', aparams, _type, this.cateObj);
        },
    }
}
</script>

<style lang="less">
.filter-by {
    // background: #181818;
    width: 220px;
    min-width: 220px;
    border-radius: 16px;
    padding: 20px;
    padding-right:10px;
    // margin-right: 20px;
    // position: sticky;
    // top: 234px;
    z-index: 1;
    // &.sch-sticky {
    //     top:84px;
    // }
    max-height:calc(100vh - 120px);
    min-height:calc(100vh - 120px);
    overflow-y:auto;
    overflow-x:hidden;

    &::-webkit-scrollbar {
        display: none;
    }
    &:hover{
        &::-webkit-scrollbar {
            display: inherit;
        }
    }
    .title {
        color: #969696;
        font-size: 14px;
        line-height: 20px;
        margin-bottom:12px;
    }

    .cates {
        color: #fff;
        padding-right:10px;
        min-width:284px;
        margin-top:7px;
        .cate-name {
            width: 100%;
            display: flex;
            justify-content: space-between;
            user-select: none;
            font-size:16px;
            line-height:46px;
            border:6px;
            font-weight:bold;
            padding:0px 9px;
            // margin-top:9px;
            // margin-bottom:9px;
            border-radius:8px;
            align-items: center;
            color:#fff;
            &:after {
                content: '';
                width: 20px;
                height: 20px;
                background: url('../assets/pro/cate_m_arrow.svg') no-repeat;
                background-position:center;
                transition: .2s all linear;
                background-size:18px 18px;
            }
            &:hover {
                background:#2F2E35;
            }

            &.collapse {
                &:after {
                    transform: rotate(90deg);
                }
            }
        }

        .sub-cates {
            // display: none;
            // margin-top: 20px;
            display:flex;
            // grid-gap:10px;
            flex-direction:column;
            padding-left:10px;
            padding-right:10px;
            li{
                width:100%;
                position: relative;
                line-height:40px;
                .num{
                    position: absolute;
                    right:0px;
                    font-style: normal;
                    font-size:12px;
                    color:#969696;
                }
            }
            .view-btn{
                a{
                    color:#969696;
                    font-size:14px;
                }
            }
        }
        >li {
            font-size: 16px;
            cursor: pointer;
            border-bottom:1px solid #e0e0e0;
            padding-bottom:8px;
            padding-top:8px;
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }

    .sub-title {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 17px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .sub-go-back {
            width: 20px;
            height: 20px;
            background: url('../assets/pro/cate_m_arrow.svg') no-repeat;
            transform: rotate(180deg);
            position: absolute;
            background-position: center;
            background-size: 6px 10px;
            left: 0px;
            top: 0px;
        }
    }

    .sub-cates {
        color: #fff;

        li {
            // margin-bottom: 20px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            user-select: none;
            align-items: center;
            &:hover {
                color: #11CCB1;
            }

            &:not(.view-btn):before {
                content: '';
                width: 16px;
                height: 16px;
                background: url('../assets/pro/cate_default.svg') no-repeat;
                display: inline-block;
                background-size: cover;
                margin-right: 10px;
            }
            .text{
                color:#DFDFDF;
            }

            &.active {
                &:before {
                    background: url('../assets/pro/mutiple_selected_pic.svg') no-repeat;
                    background-size: cover;
                }
                .text{
                    color:#fff;
                }
            }

            &:last-child {
                margin-bottom: 0px;
            }
        }

        &.single{
            li{
                &:not(.view-btn):before {
                    content: '';
                    width: 16px;
                    height: 16px;
                    background: url('../assets/pro/sig_sel.svg') no-repeat;
                    display: inline-block;
                    background-size: cover;
                    margin-right: 10px;
                }

                &.active {
                    &:before {
                        background: url('../assets/pro/sig_seled.svg') no-repeat;
                        background-size: cover;
                    }
                    .text{
                        color:#fff;
                    }
                }
            }
        }
    }
}
</style>